<script setup lang="ts">
import { ref } from 'vue'
import * as quotationRulesApi from '@/api/quotationRules'
import { message } from 'ant-design-vue'

const myModal = ref()

const showModal = () => {
  getCinemaLineList()
  myModal.value?.showModal()
}

let props = withDefaults(defineProps<{ okOutLineList: Array<any> }>(), {
  okOutLineList: () => [],
})
watch(() => ({...props}), (newVal, oldVal) => {
  // console.log('props=', props.okOutLineList)
  lineArr.value = props.okOutLineList
})

const emit = defineEmits<{
  refresh: [list: Array<any>]
}>()

defineExpose({
  showModal,
})

const columns = [
  {
    title: 'id',
    key: 'value',
    width: 180,
  },
  {
    title: '院线',
    key: 'label',
    width: 180,
  },
  {
    key: 'action',
    width: 150,
  },
]

const okCancelBind = async () => {
  emit('refresh', lineArr.value)
  message.success('已添加，[确认推送]后生效！')
  myModal.value.cancelModal()
}

import type { SelectProps } from 'ant-design-vue'
// 所有select的模糊搜索
const filterOption = (input: string, option: any) => {
  return option.label.indexOf(input) >= 0
}
const cinemaLineList = ref<SelectProps['options']>([])
const getCinemaLineList = async () => {
  try {
    const { state, data, message: msg } = await quotationRulesApi.getCinemaLineList()
    if (state === 200) {
      cinemaLineList.value = data.map((item: any) => {
        return {
          label: item.cinemaLineName,
          value: item.id,
        }
      })
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const lineArr = ref<Array<string>>([])
let okCinemaLine = ref<Array<any>>([])
const selectCinemaLine = (selectValue: any, option: any) => {
  okCinemaLine.value = selectValue
  lineArr.value = option
  emit('refresh', lineArr.value)
  console.log('lineArr=', lineArr.value)
}

const del = (id: string) => {
  lineArr.value = lineArr.value.filter((item: any) => item.value != id)
  emit('refresh', lineArr.value)
}
</script>

<template>
  <MyModal ref="myModal" title="添加排除院线" :top="25" :width="900">
    <template #content>
      <div style="margin-bottom: 10px">
        <a-select
          style="width: 100%"
          placeholder="请选择院线"
          mode="multiple"
          show-search
          :options="cinemaLineList"
          :filter-option="filterOption"
          v-model:value="lineArr"
          @change="selectCinemaLine"
        >
          <a-select-option v-for="(item, index) in cinemaLineList" :key="index" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </div>

      <a-table
        style="height: 400px"
        :columns="columns"
        :data-source="lineArr"
        :pagination="false"
        rowKey="value"
        :scroll="{ y: 320 }"
      >
        <template #emptyText>
          <a-empty description="暂无数据" />
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'value'">
            <div style="width: 180px">
              <span>{{ record.value }}</span>
            </div>
          </template>

          <template v-if="column.key === 'label'">
            <div style="width: 180px">
              <span>{{ record.label }}</span>
            </div>
          </template>

          <template v-if="column.key === 'action'">
            <div style="width: 180px">
              <a @click="del(record.value)">删除</a>
            </div>
          </template>
        </template>
      </a-table>

      <div style="text-align: right">
        <a-button @click="myModal.cancelModal()">取消</a-button>
        <a-button @click="okCancelBind" style="margin-left: 10px" type="primary">确定</a-button>
      </div>
    </template>
  </MyModal>
</template>

<style scoped lang="less"></style>
